<template>
  <div>
    <dl>
      <dt>
        <img src="http://106.15.179.105:3000/public/imgs/phone/phone.png" alt />
      </dt>
      <dd>
        <ul>
          <li v-for="item in cellphone " :key="item.id">
            <img :src="'api'+item.product_picture" alt />
            <p>{{item.product_name}}</p>
            <p>{{item.product_title}}</p>
            <p>
              <span class="oneSpan">{{item.product_selling_price}}</span>
              <span class="twoSpan">{{item.product_price}}</span>
            </p>
          </li>
          <li></li>
        </ul>
      </dd>
    </dl>
  </div>
</template>
<script>
import API from "../api/homeApi";
export default {
  data() {
    return {
      cellphone: []
    };
  },
  created() {
    this.callsFig();
  },
  methods: {
    async callsFig() {
      let res = await API.getHotProduct({ categoryName: ["手机"] });
      this.cellphone = res.Product;
      console.log(this.cellphone);
    }
  }
};
</script>
<style lang="scss" scoped>
dl {
  display: flex;
  width: 100%;
  height: 735px;
  margin: auto;
  margin: 0;
  dt {
    height: 100%;
    width: 20%;
    display: flex;
    img {
      width: 280px;
    }
  }
  dd {
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    ul {
      width: 100%;
      height: 100%;
      padding: 0;
      justify-content: space-between;
      flex-wrap: wrap;
      display: flex;
      li {
        margin-left: 20px;
        background: white;
        width: 23%;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        a
        img{
            width: 160px;
            height: 160px;
        }
        p {
          margin-top: 14px;
          .oneSpan {
            color: red;
          }
          .twoSpan {
            text-decoration: line-through;
            color: #b0b0b0;
          }
        }
      }
    }
  }
}
</style>